<template>
  <!-- 我的  抖音素材  视频（未调用接口+点击跳转到详情页）  -->
  <div id="matevideo">
    <section class="input_group">
      <input type="text"
             v-model="input01"
             placeholder="请输入关键词找热门视频"
             @keyup.enter="search_input()"
             onfocus="if(this.value=='请输入关键词找热门视频'){this.value=''};this.style.color='#333';">
      <div @click="search_input()"
           class="search">
        <img src="@/assets/two/seach.png">
      </div>
    </section>
    <!--  内容部分  -->
    <van-loading v-if="loading_01"
                 vertical>拼命加载中...</van-loading>
      <van-pull-refresh v-model="refreshing"
                        @refresh="onRefresh">
        <div class="box"
             v-for="(item, index) in table_data01"
             :key="'table' + index"
             @click="dialog=true;active_name01='0';video_id=item.aweme_id;">
          <!-- 视频ban -->
          <div class="boxleft">
            <a href=""
               class="aa"><img :src="item.thum_pic"></a>
            <a :href="item.url"
               target="_blank"><img src="@/assets/two/play.png"
                   class="play"></a>
          </div>
          <!-- 文字介绍 -->
          <div class="boxright">
            <p class="tit">{{ item.title }}</p>
            <!-- 数字 -->
            <div class="num">
              <div class="one">
                <p>{{ format_num(item.favorite_count) }}</p>
                <span>点赞数</span>
              </div>
              <div class="two">
                <p>{{ format_num(item.comment_count) }}</p>
                <span>评论数</span>
              </div>
              <div class="three">
                <p>{{ format_num(item.share_count) }}</p>
                <span>关注数</span>
              </div>
            </div>
            <!-- 作者+时间 -->
            <div class="time">
              <div class="author">
                <a href="">
                  <img :src="item.logo">
                </a>
                <span>{{ item.nickname }}</span>
              </div>
              <div class="day">发布时间：{{ timestamp(item.release_time, 'Y-M-D h:m:s')}} </div>
            </div>
          </div>
        </div>
      </van-pull-refresh>
    <p class="nothing"
       v-show="table_data01.length!=0 && table_data01.length==table_data01.length">我是有底线的～</p>
    <div class="empty"
         v-show="!loading&&table_data01.length==0">
      <img src="@/assets/two/zanwushuju_03.jpg">
      <p>目前没有可以查看的数据哟，请稍后再试~</p>
    </div>
    <!-- <pop v-if="dialog"
         v-model="dialog"
         :id="video_id"
         :index="active_name01" /> -->
  </div>
</template>

<script>
import Vue from 'vue'
import { Toast } from 'vant'
Vue.use(Toast)
export default {
  name: 'videoStar',
  components: {},
  data() {
    return {
      page: 1,
      pageSize: 20,
      dialog: false,
      active_name01: '1',
      table_data01: [],
      //  //触底
      loading: false,
      finished: false,
      refreshing: false,
      input01: '',
      page01: 1,
      permissions: 1,
      value01: '全部',
      value03: '不限',
      value04: '不限',
      value05: '',
      value06: '不限',
      value07: '不限',
      value08: '不限,不限',
      value09: '24小时',
      order_by: 'desc', //   表格头部排序
      sort: 'favoriteCount', //   表格头部排序
      video_id: '',
      loading_01: false,
    }
  },
  computed: {
    listen_change() {
      const {
        value01,
        value02,
        value03,
        value04,
        value05,
        value06,
        value07,
        value08,
        value09,
        order_by,
        sort,
      } = this
      return {
        value01,
        value02,
        value03,
        value04,
        value05,
        value06,
        value07,
        value08,
        value09,
        order_by,
        sort,
      }
    },
  },
  watch: {},
  created() {
    this.get_data()
  },
  mounted() {
    this.get_data()
  },
  methods: {
    search_input() {
      this.page01 = 1
      this.table_data01 = []
      this.get_data()
    },
    get_data() {
      let that = this
      this.loading = true
       this.loading_01 = true
      this.busy = true
      let duration
      switch (this.value03) {
        case '不限':
          duration = '不限'
          break
        case '0-15s':
          duration = '0-15000'
          break
        case '16-30s':
          duration = '16000-30000'
          break
        case '31-60s':
          duration = '31000-60000'
          break
        case '60s以上':
          duration = '60000-999999999999999'
          break
      }
      let favorite
      switch (this.value04) {
        case '不限':
          favorite = '不限'
          break
        case '<1万':
          favorite = '0-10000'
          break
        case '1万-10万':
          favorite = '10000-100000'
          break
        case '10万-50万':
          favorite = '100000-500000'
          break
        case '50万-100万':
          favorite = '500000-1000000'
          break
        case '100万-200万':
          favorite = '1000000-2000000'
          break
        case '>200万':
          favorite = '2000000-99999999999'
          break
      }
      let time
      switch (this.value09) {
        case '1小时':
          time = '1h'
          break
        case '3小时':
          time = '3h'
          break
        case '6小时':
          time = '6h'
          break
        case '12小时':
          time = '12h'
          break
        case '24小时':
          time = '24h'
          break
        case '近3天':
          time = '3d'
          break
        case '近7天':
          time = '7d'
          break
      }
      //     加载中
      if (this.table_data01.length > 0) {
        Toast.loading({
          message: '加载中...',
          forbidClick: true,
          duration: 0,
        })
      }
      this.$axios
        .post('api/aweme/search', {
          keyword: that.input01,
          size: 50,
          page: that.page01,
          category: 0,
          duration: duration,
          favorite_count: favorite,
          is_pro: that.value05 != '' ? 1 : 0,
          more_age: that.value06,
          more_gender: that.value07 == '女' ? 2 : that.value07 == '男' ? 1 : 3,
          more_province: that.value08.split(',')[0],
          more_city: that.value08.split(',')[1],
          time,
          order_by: that.order_by,
          sort: that.sort,
        })
        //   请求成功
        .then((res) => {
          if (res.data.code == 0) {
            Toast.clear()
            this.table_data01 = this.table_data01.concat(res.data.data)
            this.loading = false
            this.refreshing = false
            this.loading_01 = false
          } else if (res.data.code == 1002) {
            Toast.clear()
            this.loading = false
            this.refreshing = false
          }
          if (response.data.code == 1003) {
            this.permissions = 0
            this.loading_01 = false
          }
        })
        //   请求失败
        .catch((err) => {
          console.log(err)
        })
    },
    // 触底 (滑到底部时)
    onLoad() {
      this.loading = true
      if (this.page * this.pageSize > this.table_data01.length) {
        if (this.table_data01.length == 0) {
          this.loading = false
          this.finished = false
        } else {
          this.loading = false
          this.finished = true
        }
      } else if (this.table_data01.length > 0) {
        this.page = this.page + 1
        this.get_data()
      }
    },
    //     上拉刷新
    onRefresh() {
      // 清空列表数据
      //   this.finished = false;
      this.pageIndex = 1
      this.table_data01 = []
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.get_data()
    },
  },
}
</script>
<style scoped lang="less">
#matevideo {
  background: #f1f1f1;
  min-height: 100vh;
  position: relative;
  a {
    text-decoration: none;
  }
  //   搜索栏
  .input_group {
    max-width: 9.2rem;
    position: absolute;
    top: -2.44rem;
    left: 0.4rem;
    input {
      width: 8.82rem;
      background: #f1f1f1;
      outline: none;
      border-radius: 0.4rem;
      border: 0;
      font-size: 0.346rem;
      font-family: PingFangSC-Regular;
      font-weight: normal;
      font-stretch: normal;
      line-height: 0.346rem;
      letter-spacing: 0px;
      color: #b5b5b5;
      padding: 0.266rem 0 0.266rem 0.4rem;
    }
    .search {
      position: absolute;
      top: 0.1rem;
      right: 0.42rem;
      width: 0.4rem;
      height: 0.4rem;
      img {
        width: 100%;
        border: solid 1px #e5e5e5;
      }
    }
  }
  .box {
    display: flex;
    width: 92%;
    margin: 0 auto;
    border: 1px solid transparent;
    border-radius: 8px;
    background: #fff;
    margin-top: 0.2rem;
    // 视频ban
    .boxleft {
      width: 28.98%;
      position: relative;
      > .aa {
        width: 80%;
        height: 2.666667rem;
        display: block;
        margin: 0.266667rem auto 0 auto;
        border-radius: 0.213rem;
        overflow: hidden;
        > img {
          width: 100%;
          height: 100%;
          display: inline-block;
          border: solid 1px #e5e5e5;
        }
      }
      .play {
        position: absolute;
        top: 32%;
        left: 30%;
      }
    }
    // 文字介绍
    .boxright {
      width: 71.02%;
      .tit {
        width: 84.48%;
        line-height: 0.373333rem;
        font-size: 0.373333rem;
        padding: 0.48rem 0 0.4rem 0.026rem;
        color: #222;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .num {
        display: flex;
        .one > p,
        .two > p,
        .three > p {
          font-family: Dinpro-medium;
        }
        .one,
        .two {
          width: 34.28%;
        }
        .three {
          width: 30.6%;
        }
        p {
          font-size: 0.293rem;
          text-align: left;
          padding-bottom: 0.186rem;
          color: #222;
        }
        span {
          display: block;
          font-size: 0.266667rem;
          text-align: left;
          padding-bottom: 0.293333rem;
          color: #888;
        }
      }
      .time {
        display: flex;
        height: 0.506667rem;
        padding-bottom: 0.373333rem;
        .author {
          display: flex;
          width: 2.8rem;
          height: 0.506667rem;
          font-family: PingFangSC-Regular;
          font-size: 0.306rem;
          color: #222;
          a {
            display: block;
            width: 0.506667rem;
            height: 0.506667rem;
            border-radius: 50%;
            overflow: hidden;
            img {
              width: 100%;
              height: 100%;
              display: inline-block;
            }
          }
          > span {
            display: block;
            width: 2.13rem;
            padding-left: 0.133rem;
            padding-top: 0.026667rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
        .day {
          margin-left: 0.16rem;
          width: 55.1%;
          line-height: 0.506667rem;
          font-size: 0.306rem;
          color: #888;
          overflow: hidden;
        }
      }
    }
  }
  .empty {
    width: 100%;
    margin-top: 1.733333rem;
    text-align: center;
    font-size: 0.346667rem;
    color: #888;
    img {
      display: block;
      width: 9.2rem;
      margin: 0 auto;
    }
    p {
      line-height: 1rem;
    }
  }
  .nothing {
    width: 100%;
    line-height: 1rem;
    text-align: center;
    font-size: 0.346667rem;
    color: #888;
  }
  .bot > {
    width: 9.226667rem;
    height: 0.906667rem;
    margin: 0 auto;
    margin-bottom: 0.266667rem;
    img {
      width: 9.226667rem;
      height: 0.906667rem;
    }
  }
}
</style>
